import React from 'react'
import { Button, Input, Row, Col, Form } from 'antd'
const Search = Input.Search;
import Inputter from 'components/inputter'
const FormItem = Form.Item;

export default {
  key: 'inputter',
  name: 'Inputter 选择输入框',
  author: '张然',
  description: '用于从大量数据中选择数据并可进行编辑的场景。',
  isExampleFull: false,
  api: [{
    title: 'API',
    data: [{
      param: 'placeholder', description: '没有值时输入框显示的文字。', type: 'string', defaultValue: '请输入 / 请选择'
    },{
      param: 'disabled', description: '是否禁用。', type: 'boolean', defaultValue: 'false'
    },{
      param: 'type', description: '内部::ListSelector::所需要的::type::。', type: 'string', defaultValue: '-'
    },{
      param: 'selectorItem', description: '内部::ListSelector::所需要的::selectorItem::。', type: 'object', defaultValue: '-'
    },{
      param: 'listExtraParams', description: '内部::ListSelector::所需要的::extraParams::。', type: 'object', defaultValue: '-'
    },{
      param: 'valueKey', description: '内部::ListSelector::需要回填至输入框的字段名。', type: 'string', defaultValue: '-'
    },{
      param: 'onChange', description: '值发生改变时的回调。', type: 'function(value)', defaultValue: '-'
    },{
      param: 'value', description: '组件内输入框处的值。', type: 'string', defaultValue: '-'
    }],
    description: '每个::Inputter::内部都有一个::ListSelector::，具体配置可见::Chooser::文档中的::ListSelector::API。'
  }],
  example: [
    {
      title: '基础用法',
      description: '点击按钮后选择值，然后回填如输入框，可设置::disabled::。',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <Inputter type="user"
                      valueKey="fullName"
                      onChange={context.handleChange}/>
            <br/>
            <Inputter type="user"
                      valueKey="fullName"
                      disabled
                      onChange={context.handleChange}/>
          </div>
        )
      }
    },
    {
      title: '兼容antd的表单',
      description: '本组件可用于antd的::Form::组件中，使用::getFieldDecorator::包裹即可与antd表单一同使用。',
      state: {},
      getMethod: context => {
        return {
          handleSubmit: e => {
            e.preventDefault();
            context.props.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                console.log('Received values of form: ', values);
              }
            });
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        const { getFieldDecorator } = context.props.form;
        return (
          <Form onSubmit={context.handleSubmit}>
            <FormItem label='姓名' style={{ marginBottom: 12 }}>
              {getFieldDecorator('user', {
                rules: [{
                  required: true,
                  message: '请输入'
                }]
              })(
                <Inputter type="user"
                          valueKey="fullName"/>
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">提交</Button>
            </FormItem>
          </Form>
        )
      }
    },
  ]
}
